<template>
  <div>
    <div class="order-header" >
      <div class="container">
          <div>
        <div class="header-logo">
          <a href="/"></a>
        </div>
        <div class="title">
          <h2>{{title}}  <slot name="tip"></slot> </h2>
        
        </div>
        </div>
        <div class="username">
          <a href="javascript:;">{{ username }} </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "OrderHeader",
    props:{
      title:String
    },
  data() {
    return {};
  },
  computed: {
    ...mapState({ username: (state) => state.home.username }),
  },
  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
  .order-header{
    padding:30px 0;
    border-bottom:2px solid #FF6600;
    // .header-logo,.title{
    //     float: left;给父亲加clearfix
    // }
    // .username{
    //     float: right;
    // }
    .container{ 
        display: flex;
       justify-content: space-between;
        align-items: center;
    }
    // 给logoinlineblock且vertical
    .title,.username{
      display:inline-block;
      height:55px;
      line-height:55px;
    }
    .title{
     
      margin-left:54px;
      h2{
        font-size:28px;
        color:#333333;
      }
      span{
        font-size:14px;
        margin-left:17px;
        color:#999999;
        font-weight:200;
      }
    }
    .username{
      
      a{
        color:#FF6600;
        font-size:20px;
        font-weight: bold;
      }
    }

    }
    
 
     
 
</style>
